<template>
<div class="aaa">
  <div class="login">
    <!-- 新增和修改弹层 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="(action === 'add' ? '用户' : '') + '注册'"
      :visible.sync="visible"
      width="480px"
      @closed="$refs.form.clearValidate()"
    >
      <!-- 表单 -->
      <el-form label-width="90px" :model="form" :rules="rules" ref="form">
        <el-form-item label="账户" prop="username">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="nickname"
          :rules="{ required: action === 'add', message: '请输入密码！' }"
        >
          <el-input
            type="password"
            v-model="form.password"
            :placeholder="action === 'edit' ? '不修改则保持为空！' : ''"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname" />
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model="form.mobile" />
        </el-form-item>
        <el-form-item label="上传头像" prop="avatar">
          <el-input v-model="form.avatar">
            <el-upload
              slot="append"
              action="http://cloud.scnew.com.cn/api/user/upload"
              :show-file-list="false"
              :on-success="uploadSuccess"
              :before-upload="beforeUpload"
            >
              <el-button icon="el-icon-upload2"></el-button>
            </el-upload>
          </el-input>
        </el-form-item>

        <el-form-item label="性别" prop="gender">
          <el-radio v-model="form.gender" :label="2">男</el-radio>
          <el-radio v-model="form.gender" :label="1">女</el-radio>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>

    <h1 class="heading">用户登录</h1>
    <el-form
      :model="form"
      :rules="rules"
      ref="form"
      label-width="50px"
      autocomplete="off"
    >
      <el-form-item label="账户" prop="username">
        <el-input v-model.trim="form.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model.trim="form.password" show-password />
      </el-form-item>
      <el-form-item class="btns">
        <el-button type="primary" @click="submit">登录</el-button>
        <el-button type="danger" @click="add">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      action: 'add',
      condition: {},
      listData: [],
      form: {},
      rules: {
        username: { required: true, message: '请输入账户！' },
        password: { required: true, message: '请输入密码！' },
        mobile: { required: true, message: '请输入手机号' }
      }
    }
  },
  methods: {
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 收集到了用户登录信息，然后post提交给后端
          this.$http
            .post('index/userlogin', JSON.stringify(this.form))
            .then((res) => {
              if (res.err > 0) {
                this.$message.error(res.desc)
              } else {
                localStorage.setItem('Zk-Token', res.token)
                this.$router.replace('/index')
              }
            })
        }
      })
    },
    add () {
      this.visible = true
      this.action = 'add'
      this.form = { state: 2 }
    },
    save () {
      this.$refs.form.validate((vaild) => {
        if (vaild) {
          this.$http.post(`admin/${this.action}`, this.form).then((res) => {
            if (res.err > 0) {
              this.$message.error(res.desc)
            } else {
              this.$message.success(res.desc)
              this.visible = false
            }
          })
        }
      })
    },
    beforeUpload (file) {
      const ext = file.name.match(/\.(\w+)$/i)[1].toLowerCase()
      const isPic = ['jpeg', 'png', 'gif', 'jpg', 'webp']
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isPic.includes(ext)) {
        this.$message.error('上传图片只能是 ' + isPic + ' 格式!')
      }
      if (!isLt2M) this.$message.error('上传图片大小不能超过 2MB!')
      return isPic && isLt2M
    },
    uploadSuccess (res) {
      if (res.err > 0) {
        this.$message.error(res.desc)
      } else {
        this.$message.success(res.desc)
        this.$set(this.form, 'avatar', res.result)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.aaa {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}
.login {

  width: 320px;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
  padding: 20px;
  margin-left: -150px;
  background-color: white;
  .heading {
    text-align: center;
    font-size: 24px;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .btns {
    padding-left: 20px;
  }
}
</style>
